<template>
  <div class="movieTitle">影院管理</div>
  <el-table :data="pageData.cinemalist.slice((pageData.current-1)*pageData.pagesize,pageData.current*pageData.pagesize)" style="width: 100%">
     <el-table-column label="序号" > <template  #default="scope"><span>{{(pageData.current - 1) * pageData.pagesize + scope.$index + 1}}</span></template></el-table-column> 
    <el-table-column prop="cid" label="影院ID" width="220" />
    <el-table-column prop="cname" label="影院名称" width="220" />
    <el-table-column prop="address" label="影院地址" width="220"  show-overflow-tooltip/>
    <el-table-column prop="phone" label="联系电话" width="220" show-overflow-tooltip/>
    <el-table-column prop="city" label="影院所在地" width="220" />
    <el-table-column fixed="right" width="110">
      <template #header>
        <el-button size="small" @click="handleRef()"
          ><el-icon><refresh /></el-icon
        ></el-button>
        <el-button size="small" @click="handleAdd()"
          ><el-icon><plus /></el-icon
        ></el-button>
      </template>
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          ><el-icon><edit /></el-icon
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          ><el-icon><delete /></el-icon
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

 <!--添加电影面版 -->
  <el-dialog
    v-model="dialogFormcinemaVisible"
    title="添加影院"
  >
    <el-form :model="addcinemadialogData">
      <el-form-item label="影院名称" class="elstyle" label-width="100px" >
        <el-input v-model="addcinemadialogData.cname"/>
      </el-form-item>
      <el-form-item label="影院地址" class="elstyle" label-width="100px">
        <el-input   v-model="addcinemadialogData.address"/>
      </el-form-item>
      <el-form-item label="联系方式" class="elstyle" label-width="100px">
        <el-input   v-model="addcinemadialogData.phone"/>
      </el-form-item>
       <el-form-item label="影院所在地" class="elstyle" label-width="100px">
        <el-input   v-model="addcinemadialogData.city"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormcinemaVisible = false">取消</el-button>
        <el-button type="primary" @click="addCinemaInfo">添加</el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改电影面版 -->
  <el-dialog
    v-model="dialogFormcinemaUpdateVisible"
    title="编辑影院"
  >
    <el-form :model="updatecinemadialogData">
        <el-form-item label="影院ID" class="elstyle" label-width="100px" >
        <el-input disabled v-model="updatecinemadialogData.cid"/>
      </el-form-item>
       <el-form-item label="影院名称" class="elstyle" label-width="100px" >
        <el-input v-model="updatecinemadialogData.cname"/>
      </el-form-item>
      <el-form-item label="影院地址" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.address"/>
      </el-form-item>
      <el-form-item label="联系方式" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.phone"/>
      </el-form-item>
       <el-form-item label="影院所在地" class="elstyle" label-width="100px">
        <el-input   v-model="updatecinemadialogData.city"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormcinemaUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateCinemaInfo">保存</el-button>
      </span>
    </template>
  </el-dialog>


    <!--分页 -->
    <el-pagination
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>

<script lang="ts">
import { Delete, Refresh, Edit, Plus } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, toRaw, toRefs } from "vue";
import { postAddCinemaAPI, postDeleteCinemaAPI, postSelectCinemaAPI,postUpdateCinemaAPI ,  } from "../../api/userinfo";
import { ElMessage } from "element-plus";
export default {
  components: { Delete, Refresh, Edit, Plus },
  setup() {
    interface Cinema {
    cid?:number;
    cname:string;
    address:string;
    phone:string;
    city:string;
    }
    let dialogFormcinemaVisible=ref(false);
    let dialogFormcinemaUpdateVisible=ref(false);
    let addcinemadialogData=reactive({
      cname:"",
      address:"",
      phone:"",
      city:""
    })
    const updatecinemadialogData=reactive({
      cid:1,
      cname:"",
      address:"",
      phone:"",
      city:""
    })
    onMounted(() => {
      handleRefs();
    });
    const handleClick = () => {
      console.log("click");
    };
             /**分页 */
    const pageData=reactive({
       current:1,//当前页
       pagesize:10,// 当前页显示多少条
       cinemalist:ref([]),
       total:0  //总数据
     })
    /**界面刷新 */
    const handleRefs = async () => {
      await postSelectCinemaAPI()
        .then((res) => {
          res.data.forEach((element: never) => {
            pageData.cinemalist.push(element);
          });
          pageData.total = pageData.cinemalist.length;
        })
        .catch((err: any) => {
          ElMessage.error("加载失败");
        });
    };
    const updateCinemaInfo=async()=>{
      await postUpdateCinemaAPI({
      cid:1,
      cname:updatecinemadialogData.cname,
      address:updatecinemadialogData.address,
      phone:updatecinemadialogData.phone,
      city:updatecinemadialogData.city
      }) .then((res) => {
          ElMessage({
            message: "更新成功",
            type: "success",
            center: true,
            grouping: true,
          });
          pageData.cinemalist=[]
          handleRefs();
        })
        .catch((err: any) => {
          ElMessage.error("更新失败");
        });
    }
    const handleRef = async () => {
       pageData.cinemalist=[]
      await postSelectCinemaAPI()
        .then((res) => {
          res.data.forEach((element: never) => {
             pageData.cinemalist.push(element)
          });
          ElMessage({
            message: "刷新成功",
            type: "success",
            center: true,
            grouping: true,
          });
        })
        .catch((err: any) => {
          ElMessage.error("刷新失败");
        });
    };
    const handleAdd = () => {
      dialogFormcinemaVisible.value=true;
    };
    const addCinemaInfo=async ()=>{
      await postAddCinemaAPI({
      cname:addcinemadialogData.cname,
      address:addcinemadialogData.address,
      phone:addcinemadialogData.phone,
      city:addcinemadialogData.city
      }).then(()=>{
        ElMessage({
            message: "添加成功",
            type: "success",
            center: true,
            grouping: true,
          });
          dialogFormcinemaVisible.value=false;
          pageData.cinemalist=[]
          handleRefs();
        }).catch((err: any) => {
          ElMessage.error("添加失败");
        });
    }
    const handleEdit = (index: number, row: Cinema) => {
      dialogFormcinemaUpdateVisible.value=true;
      let key: keyof Cinema;
      for (key in row) {
        updatecinemadialogData[key] = row[key] as never;
      }
    };
    const handleDelete =async (index: number, row: any) => {
      await postDeleteCinemaAPI({
         cid:row.cid
      }
      ).then(() => {
           ElMessage({
            message: "删除成功",
            type: "success",
            center: true,
            grouping: true,
          });
          // tableData.value = [];
          pageData.cinemalist=[]
          handleRefs();
        })
        .catch((err: any) => {
          ElMessage.error("删除失败");
        });
    };
    const handleSizeChange=(value:any)=>{
      pageData.pagesize=value;
      pageData.cinemalist=[];
      handleRefs();

    }   
    const handleCurrentChange=(value:any)=>{
      pageData.current=value;
      pageData.cinemalist=[];
      handleRefs();
    }

    return {
      handleSizeChange,
      handleCurrentChange,
      Delete,
      Edit,
      handleClick,
      handleRefs,
      handleRef,
      handleAdd,
      handleEdit,
      handleDelete,
      pageData,
      addcinemadialogData,
      updatecinemadialogData,
      dialogFormcinemaVisible,
      dialogFormcinemaUpdateVisible,
      addCinemaInfo,
      updateCinemaInfo
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;        
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination{
  padding: 50px 10px;
  margin-left: 35rem;
}
</style>
